import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

const app = createApp(App);
import {Drawer,message,Avatar,Form,Row,Col,Icon,List,Button,Progress,Pagination,Tree,Timeline,Anchor,Affix,Empty,Comment,Spin,Input,Modal} from 'ant-design-vue'
app.use(Tree)
app.use(Row)
app.use(Col)
app.use(Icon)
app.use(List)
app.use(Button)
app.use(Progress)
app.use(Pagination)
app.use(Timeline)
app.use(Anchor)
app.use(Affix)
app.use(Empty)
app.use(Comment)
app.use(Spin)
app.use(Input)
app.use(Modal)
app.use(Form)
app.use(Avatar)
app.use(Drawer)
app.directive('highlight', {
  beforeMount(el, binding){
    highlight(el, binding)
  },
  updated(el, binding){
    highlight(el, binding)
  },
});
function highlight(el, binding) {
  if (el.tagName !== 'CODE') {
      let blocks = el.querySelectorAll('code');
      blocks.forEach((block) => {
          highlight(block, binding);
      })
  } else {
      if (typeof binding.value === 'string') {
          el.textContent = binding.value;
      }
      if (el.parentElement.className == 'language-markup'){
        el.parentElement.className = 'language-html'	
      }
      hljs.highlightElement(el);
  }
}



app.config.productionTip = false;
app.config.globalProperties.$message = message;
app.use(store)
app.use(router)
app.mount('#app')
